<template>
  <div class="comingsoon">
    <!-- 加载层 -->
    <loading v-if="loading"></loading>
    <ul>
      <li
        class="one-item"
        v-for="(item, index) in comingList"
        :key="'item' + index"
        @click="gotoDetial(item.filmId)"
      >
        <div class="top-date">
          <!-- 日期 -->
          <div class="title-date">
            {{ item.premiereAt | tilPremiereAt}}
          </div>
        </div>
        <div class="bottom-info">
          <!-- 封面 -->
          <div class="pic">
            <img :src="item.poster" />
          </div>
          <!-- 电影相关信息 -->
          <ul>
            <li>{{ item.name }}</li>
            <li>{{ item.category }}</li>
            <li>主演：{{ item.actors | formatActors }}</li>
            <li>{{ item.premiereAt | formatPremiereAt }}中国大陆上映</li>
          </ul>
          <!-- 评分和购票 -->
          <div class="buy">
            <button v-if= "item.isPresale">预售</button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Loading from "../../components/Loading.vue";
import {comingSoonListData} from "../../api/api"
import moment from 'moment';
moment.locale('zh-cn', {weekdays: '星期天_星期一_星期二_星期三_星期四_星期五_星期六'.split('_')
})
export default {
  data() {
    return {
      //页数
      page: 1,
      //即将上映电影列表
      comingList:[],
      //默认显示加载层
      loading: true,
    }
  },
  components: {
    Loading
  },
  async created() {
    let res = await comingSoonListData(this.page)
    console.log(res.data.data.films);
    this.comingList = res.data.data.films
    // 判断是否有数据，如果有就移出加载层
    if (this.comingList.length > 0) {
      this.loading = false;
    }
  },
  filters: {
    //格式化主演名字
    formatActors: function (value) {
      let actors = "";
      value.forEach((element) => {
        actors += element.name + "、";
      });
      return actors;
    },
    //格式化上映日期
    formatPremiereAt: function(value) {
      return moment(value * 1000).format("YYYY年MM月DD日")
    },
    //格式化即将上映日期带星期
    tilPremiereAt: function(value) {
      return moment(value * 1000).format("MM月DD日 dddd")
    }
  },
  methods: {
    //去该电影的详情页
    gotoDetial(filmid) {
      this.$router.push("/film/detial/" + filmid);
    },
  }
};
</script>

<style lang="scss" scoped>
ul {
  width: 100%;
  // 单个电影
  .one-item {
    width: 100%;
    height: 2.85rem;
    // background-color: bisque;
    padding: 0.25rem;
    border-bottom: 1px solid #ccc;
    .top-date {
      width: 100%;
      height: .6rem;
      font-size: .3rem;
    }
    .bottom-info {
      display: flex;
      justify-content: space-between;
      // 电影封面
      .pic {
        margin-right: 0.1rem;
        img {
          width: 1.3rem;
          height: 1.7rem;
        }
      }
      // 电影相关信息
      ul {
        width: 4.2rem;
        // background-color: purple;
        li {
          font-size: 0.28rem;
          color: rgb(80, 78, 78);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 0.06rem;
        }
        li:nth-child(1) {
          font-size: 0.34rem;
          // font-weight: 600;
        }
      }
      // 评分和购票
      .buy {
        display: flex;
        flex-direction: column;
        width: 1rem;
        button {
          background-color: rgb(0, 153, 255);
          color: #fff;
          line-height: 0.6rem;
          border: 0;
          border-radius: 3px;
          font-size: 0.3rem;
          margin-top: .6rem;
          width: 1rem;
        }
      }
    }
  }
}
</style>